/**
 * desc：  登录页面
 * author：fdy
 * date：  2020/3/14 11:48 上午
 */
import React, {PureComponent} from 'react';
import {View, SafeAreaView, StatusBar, Animated, TouchableOpacity} from 'react-native';
import {LoginIndexSty} from './theme'
import {Logo} from './components/Login'
import {Button} from "../../components";


export default class LoginIndex extends PureComponent {

    static defaultProps = {};

    static propTypes = {};

    constructor(props) {
        super(props);
        this.animViewIndex = 0;
        this.viewArr = Array(7).fill()
        this.viewArr.map((_, index) => this[`animView${index}`] = new Animated.Value(0))

    }

    componentDidMount() {
        this.startAnimate()
    }

    startAnimate = () => {
        this[`animView${this.animViewIndex}`].setValue(0)
        let currentValue = this[`animView${this.animViewIndex}`].__getValue()
        if (currentValue !== 0) {
            this.animViewIndex++
        }
        Animated.timing(this[`animView${this.animViewIndex}`],
            {
                toValue: 1,
                duration: 7000,
            }
        ).start(() => {
            this[`animView${this.animViewIndex}`].setValue(0)

        })
        if (this.animViewIndex > 5) {
            this.animViewIndex = 0
        }
        this.animViewIndex++
        setTimeout(() => this.startAnimate(), Math.floor(Math.random() * (3000)) + 100)
    }

    render() {
        return (
            <View style={LoginIndexSty.common.container}>
                <StatusBar backgroundColor='rgba(0,0,0,0)' translucent barStyle="light-content"/>
                <SafeAreaView>
                    <View style={LoginIndexSty.common.outer}>
                        <View style={LoginIndexSty.common.topContainer}>
                            <TouchableOpacity onPress={() => this.startAnimate()}>
                                <Logo/>
                            </TouchableOpacity>
                            {
                                this.viewArr.map((_, index) => {
                                    let s = 74;
                                    let size = this[`animView${index}`].interpolate({
                                        inputRange: [0, 1],
                                        outputRange: [1, WIDTH * 1.4]
                                    })
                                    let border = this[`animView${index}`].interpolate({
                                        inputRange: [0, 1],
                                        outputRange: [s / 2, WIDTH * 0.7]
                                    })
                                    let opacity = this[`animView${index}`].interpolate({
                                        inputRange: [0, 0.5, 1],
                                        outputRange: [0, 1, 0]
                                    })
                                    return <Animated.View
                                        key={index}
                                        style={[LoginIndexSty.common.animateContainer, {
                                            width: size,
                                            height: size,
                                            borderRadius: border,
                                            opacity,
                                        }]}/>
                                })
                            }
                        </View>
                        <View style={LoginIndexSty.common.bottomContainer}>
                            <Button
                                onPress={() => {
                                    requestAnimationFrame(() => {
                                        this.props.navigation.navigate('LoginByPhoneNumber')
                                    })
                                }}
                                title={'手机号登录'}
                            />
                            <Button
                                titleStyle={LoginIndexSty.common.noLoginText}
                                btStyle={LoginIndexSty.common.noLogin}
                                onPress={() => {
                                }}
                                title={'立即体验'}
                            />
                        </View>
                    </View>
                </SafeAreaView>
            </View>
        );
    }
}

